<template>
  <AppLayout>
    <div class="container">
      <XtxBread>
        <XtxBreadItem path="/">首页</XtxBreadItem>
        <XtxBreadItem :path="`/category/${category?.oneCategory?.id}`">
          {{ category.oneCategory?.name }}
        </XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
          <XtxBreadItem
            :key="category.twoCategory?.id"
            :path="`/category/sub/${category?.twoCategory?.id}`"
          >
            {{ category.twoCategory?.name }}
          </XtxBreadItem>
        </Transition>
      </XtxBread>
      <!--   筛选条件-->
      <SubFilter @onFilterChange="onFilterChange"></SubFilter>
      <!-- 商品区块 -->
      <div class="goods-list">
        <!-- 商品排序 -->
        <SubSort @onSortParamsChanged="onSortParamsChanged" />
        <GoodsList :goods="goodsList?.items"></GoodsList>
        <XtxInfiniteLoading
          :finished="finished"
          :loading="loading"
          @infinite="loadMore"
        ></XtxInfiniteLoading>
      </div>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/components/AppLayout";
import { useStore } from "vuex";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { computed, ref, watch } from "vue";
import SubFilter from "@/views/category/components/SubFilter";
import SubSort from "@/views/category/components/SubSort";
import GoodsList from "@/views/category/components/GoodsList";
import { getGoodsReq } from "@/api/category";
export default {
  name: "TwoCategory",
  components: { SubFilter, AppLayout, SubSort, GoodsList },
  setup() {
    // 复选框状态
    const isChecked = ref(false);
    const {
      goodsList,
      getGoods,
      onSortParamsChanged,
      onFilterChange,
      loading,
      finished,
      loadMore,
    } = useGoods();
    getGoods();
    return {
      category: uesCategory(),
      onFilterChange,
      isChecked,
      onSortParamsChanged,
      goodsList,
      loading,
      finished,
      loadMore,
    };
  },
};
function uesCategory() {
  const store = useStore();
  const route = useRoute();
  return computed(() => {
    //保存一级分类
    let oneCategory = null;
    // 保存二级分类
    let twoCategory = null;
    store.state.category.list.forEach((item) => {
      item.children?.forEach((sub) => {
        if (sub.id === route.params.id) {
          oneCategory = item;
          twoCategory = sub;
        }
      });
    });
    return { oneCategory, twoCategory };
  });
}
// 获取二级分类数据,
function useGoods() {
  // 标识数据是否加载完毕
  const finished = ref(false);
  //标识加载状态
  const loading = ref(false);
  // 获取二级分类id
  const route = useRoute();
  // 用于存储数据
  const goodsList = ref({});
  // 用于存储请求参数
  let reqParams = ref({
    categoryId: route.params.id,
    // 当前页
    page: 1,
    // 每次请求获取的数据条数
    pageSize: 10,
  });

  // 筛选条件
  const onFilterChange = (target) => {
    reqParams.value = {
      ...reqParams.value,
      ...target,
      page: 1,
    };
  };
  // 排序条件/;
  const onSortParamsChanged = (target) => {
    reqParams.value = {
      ...reqParams.value,
      ...target,
      page: 1,
    };
  };

  const getGoods = () => {
    // 加载中
    loading.value = true;
    getGoodsReq(reqParams.value).then((data) => {
      // 如果当前是第一页,则直接赋值;
      if (reqParams.value.page === 1) {
        goodsList.value = data.result;
        finished.value = false;
      } else {
        // 如果当前不是第一页,则累加
        goodsList.value = {
          ...data.result,
          items: [...goodsList.value.items, ...data.result.items],
        };
      }
      // 如果当前页已经是最后一页
      if (reqParams.value.page === data.result.pages) {
        // 所有数据已加载完成
        finished.value = true;
      }
      // 加载完毕
      loading.value = false;
    });
  };
  // 加载更多
  const loadMore = () => {
    reqParams.value = {
      ...reqParams.value,
      page: reqParams.value.page + 1,
    };
  };
  // 监听请求参数发生变化这重新请求
  watch(
    () => reqParams.value,
    () => {
      getGoods();
    },
    {
      // 初始进入页面获取商品数据
      immediate: true,
    }
  );
  // 路由更新，更新分类id
  onBeforeRouteUpdate((to) => {
    reqParams.value = {
      ...reqParams.value,
      categoryId: to.params.id,
      page: 1,
    };
  });
  return {
    goodsList,
    getGoods,
    onFilterChange,
    onSortParamsChanged,
    finished,
    loading,
    loadMore,
  };
}
</script>

<style scoped lang="less">
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
